import React, { memo, useRef } from "react"
import { Carousel } from 'antd'
import { LeftOutlined, RightOutlined } from '@ant-design/icons'
import { SwiperWrapper } from "./style"

const Swiper = memo((props) => {
  const swiperRef = useRef(null)
  const swiperSwitch = (e, switchType) => {
    e.stopPropagation()
    if(switchType === 'prev') {
      swiperRef.current.prev()
    } else {
      swiperRef.current.next()
    }
  }

  return (
    <SwiperWrapper>
      <div className="swiper-buttons">
        <div className="swiper-button prev" onClick={e => swiperSwitch(e, 'prev')}>
          <LeftOutlined />
        </div>
        <div className="swiper-button next" onClick={e => swiperSwitch(e, 'next')}>
          <RightOutlined />
        </div>
      </div>
      <Carousel dots={false} ref={swiperRef}>
        { props.children }
      </Carousel>
    </SwiperWrapper>
  )
});

Swiper.propTypes = {}

export default Swiper
